<template>
  <div class='container'>
    <div class='flex j-c-c'>
      <span class="bold" style="font-size: 40px">概 览</span>
    </div>
    <el-row class="m-50-t">
      <el-col :span="6" class='flex column-align'>
        <div>256</div>
        <div class="m-20-t">昨日登录用户数</div>
      </el-col>
      <el-col :span="6" class='flex column-align'>
        <div>326</div>
        <div class="m-20-t">昨日发布任务订单数</div>
      </el-col>
      <el-col :span="6" class='flex column-align'>
        <div>1464</div>
        <div class="m-20-t">昨日付费会员数</div>
      </el-col>
      <el-col :span="6" class='flex column-align'>
        <div>1811</div>
        <div class="m-20-t">昨日付费金额</div>
      </el-col>
    </el-row>
    <div class="gray-line m-50-t" style="width: 80%; margin: auto;"></div>
    <el-row class="m-100-t m-50-l">
      <el-col :span="12">
        <div class="flex column-align">
          <div>用户关注趋势图</div>
          <div>
            <el-select style="width: 150px" id="follow" v-model="follow_value" class="m-30-t" @change="chart_change" @focus="choose_chart($event)">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="flex j-c-c">
          <div id="follow_chart" style="width: 80%; height: 400px" class="m-30-t"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="flex column-align">
          <div>用户登录趋势图</div>
          <div>
            <el-select style="width: 150px" id="login" v-model="login_value" class="m-30-t" @change="chart_change" @focus="choose_chart($event)">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="flex j-c-c">
          <div id="login_chart" style="width: 80%; height: 400px" class="m-30-t"></div>
        </div>
      </el-col>
    </el-row>
    <div class="gray-line m-50-t" style="width: 80%; margin: auto;"></div>
    <el-row class="m-100-t m-50-l">
      <el-col :span="12">
        <div class="flex column-align">
          <div>任务订单发布趋势图</div>
          <div>
            <el-select style="width: 150px" id="order" v-model="order_value" class="m-30-t" @change="chart_change" @focus="choose_chart($event)">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="flex j-c-c">
          <div id="order_chart" style="width: 80%; height: 400px" class="m-30-t"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="flex column-align">
          <div>用户登录趋势图</div>
          <div>
            <el-select style="width: 150px" id="vip" v-model="vip_value" class="m-30-t" @change="chart_change" @focus="choose_chart($event)">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="flex j-c-c">
          <div id="vip_chart" style="width: 80%; height: 400px" class="m-30-t"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  // import resize from './mixins/resize'
  export default {
    name: 'home',
    data() {
      return {
        follow_value: '',
        login_value: '',
        seven_days: [1,2,3,4,5,6,7],
        one_month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
        three_months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90],
        options: [{
            value: '选项1',
            label: '最近7天趋势'
          }, {
            value: '选项2',
            label: '最近一个月趋势'
          }, {
            value: '选项3',
            label: '最近三个月趋势'
          }],
        follow_value: '选项1',
        login_value: '选项1',
        order_value: '选项1',
        vip_value: '选项1',
        base_chart_data: {
                          xAxis: {
                            type: "category",
                            data: [1,2,3,4,5,6,7]
                          },
                          tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                              type: 'line'
                            },
                            padding: [5, 10]
                          },
                          yAxis: {},
                          series: [{
                            data: [820, 932, 901, 934, 1290, 1330, 1320],
                            type: "line",
                            smooth: true,
                            animationDuration: 2800,
                            animationEasing: 'cubicInOut',
                            
                          }]
                        },
        chosen_chart: '',
        follow_chart: {},
        login_chart: {},
        order_chart: {},
        vip_chart: {},
        follow_chart_data: {},
        login_chart_data: {},
        order_chart_data: {},
        vip_chart_data: {},
        chart_name_list: ["follow", "login","order","vip"],
      }
    },
    computed: {
      time_length() {
        return [this.seven_days, this.one_month, this.three_months]
      }
    },
    created() {
    },
    mounted() {
      this.initChart()
      window.addEventListener("resize", this.chartResize)
    },
    methods: {
      initChart() {
        for (let name of this.chart_name_list) {
          var chart_name = name + "_chart"
          var chart_name_data = name + "_chart_data"
          this[chart_name] = echarts.init(document.getElementById(chart_name),"macarons")
          this[chart_name_data] = this.base_chart_data
          this[chart_name].setOption(this[chart_name_data])
        }
      },
      chartResize(){
        let eleArr = [this.follow_chart, this.login_chart, this.order_chart, this.vip_chart];
        for(let i = 0; i<eleArr.length; i++){
          //此处定时器是为了在页面存在多个图时，resize方法的调用时间微微错开，避免明显的卡顿
          setTimeout(function(){
              eleArr[i].resize();
          }, 200);
        }
      },
      choose_chart(e) {
        this.chosen_chart = e.target.id
      },
      chart_change(val) {
        let chosen_chart_name = this.chosen_chart + '_chart' 
        let chosen_chart_name_data = this.chosen_chart + '_chart_data' 
        if (val=="选项1") {
          this[chosen_chart_name_data].xAxis.data = this.seven_days
        }
        if (val=="选项2") {
          this[chosen_chart_name_data].xAxis.data = this.one_month
        }
        if (val=="选项3") {
          this[chosen_chart_name_data].xAxis.data = this.three_months
        }
        this[chosen_chart_name].setOption(this[chosen_chart_name_data])
      },
    },
  }
</script>

<style scoped>
@import "~@/styles/layout.scss";
.column-align {
    flex-direction: column;
    align-items: center;
}

</style>